<template>
  <div id="app">
    <router-view />
    <ScrollToTop />
  </div>
</template>

<script>
import ScrollToTop from './components/ScrollToTop.vue'
import { getHomeInfo } from '@/utils/api'

export default {
  name: 'App',
  components: {
    ScrollToTop
  },
  data() {
    return {
      homeInfo: null
    }
  },
  provide() {
    return {
      homeInfo: () => this.homeInfo
    }
  },
  async created() {
    // 统一获取首页信息，供所有子组件使用
    try {
      this.homeInfo = await getHomeInfo()
    } catch (error) {
      console.error('获取Home信息失败:', error)
    }
    
    // 设置初始页面标题
    this.updatePageTitle(this.$route)
    
    // 监听路由变化，更新页面标题
    this.$router.afterEach((to) => {
      this.updatePageTitle(to)
    })
  },
  watch: {
    // 监听homeInfo变化，更新标题（如果数据加载较慢）
    homeInfo() {
      this.updatePageTitle(this.$route)
    }
  },
  methods: {
    updatePageTitle(route) {
      const titleEn = this.homeInfo?.titleEn || 'Multimodal Health Data and Aging Lab'
      
      if (route.name === 'Home') {
        // Home页面只显示titleEn
        document.title = titleEn
      } else {
        // 其他页面显示：导航菜单名 - titleEn
        const pageTitle = route.meta?.title || route.name || 'Page'
        document.title = `${pageTitle} - ${titleEn}`
      }
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

